import React from 'react';
import { Notification } from 'antd';
import { Row, Col, Button, Form, Input, Checkbox, message} from 'antd';

const createForm = Form.create;
const FormItem = Form.Item;

function noop() {
  return false;
}

//自动登录选框
function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}


let Login = React.createClass({

    getInitialState() {
      return {
        data: null,
        mobilePhone: '', //初始化
        password: '',
        code: '',
        Record: [],
        isAvailable: false,//是否可用
      }
    },

    contextTypes: {
      router: React.PropTypes.object
    },

    // 回车登录
    handleKeyEvent(event) {
      if (event.keyCode == 13) {
        this.handleSubmit();
      }
    },
    handClick() {
        let goPathUrl = '/forgetPwd';
        this.context.router.push(goPathUrl);
    },

    handleSubmit(e) {
      this.props.form.validateFields((errors, values) => {
        if (!!errors) {
          return;
        }
        var params = this.props.form.getFieldsValue();
        Utils.sendAjax({
          url: '/user/doLogin',
          data: JSON.stringify(params),
          method: 'post',
          callback: (result) => {
            if (result.code === '200') {
              let params = result.data
              let goPathUrl = '/workSpace';
              localStorage.userName = result.data.userName;
              localStorage.mobilePhone = result.data.mobilePhone;
              this.context.router.push({pathname: goPathUrl, state: {...params}})
            } else {
              this.error()
              /* var phone = this.state.mobilePhone;
               var password = this.state.password ;
               var isAvailable1="";*/
            }
          }
        });
      });
    },

    error() {
      message.error('您输入的手机号码或登录密码错误', 10);
    },

    render(){
      
      const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;

      const mobilePhoneProps = getFieldProps('mobilePhone', {
        rules: [
          {required: true, message: '手机号码不能为空'},
          {validator: Utils.phone},
        ],
        onChange: (e) => {
          this.setState({mobilePhone: e.target.value});
        },
      });

      const passwordProps = getFieldProps('password', {
        rules: [
          {required: true, message: '登录密码不能为空'},
          {validator: Utils.password},
        ],
      });


      return (
        <div className="sign-in" >
          <div className="main-content">
            <section>
              <Form horizontal form={this.props.form}>
                <FormItem
                  hasFeedback>
                  <i className="phone-img"></i>
                  <Input idName="mobilePhone" value={this.state.mobilePhone} {...mobilePhoneProps} placeholder="请输入手机号码"/>
                </FormItem>
                <FormItem
                  hasFeedback>
                  <i className="password"></i>
                  <Input type="password" {...passwordProps} placeholder="请输入登录密码" onKeyUp={this.handleKeyEvent}/>
                </FormItem>
                <FormItem
                  hasFeedback
                  className="login-row">
                  <Checkbox className="automatic-login"
                            onChange={onChange}>自动登录</Checkbox>
                  <a className="forget-pwd" onClick={this.handClick}>忘记密码？</a>
                  <Button id="sign-button" className="sign-button" type="primary"
                          onClick={this.handleSubmit} disabled={this.state.isAvailable}>登录
                  </Button>
                </FormItem>
                <FormItem
                  hasFeedback
                >
                  {/*<p className="apply-join" onClick={this.handleJoin}>申请入驻</p>*/}

                </FormItem>
              </Form>
            </section>
          </div>
        </div>
      );
    }
  })
  ;


Login = createForm()(Login);
export default Login;
